<script setup>
import {computed, inject} from "vue"
import DesignerElementBox from "../Layout/DesignerElementBox.vue"

const props = defineProps({
    table: {
        type: Object,
    },
    elem: {
        type: Object,
    }
})
const emits = defineEmits(['active'])
const activeElementId = inject("activeElementId")

/**
 * 列样式
 * @returns {*&{fontSize, fontWeight, color}}
 */
const columnStyle = computed(() => {
    return {
        ...props.table.columnStyleConfig,
        ...props.elem.styleConfig,
    }
})
/**
 * 移除单元格中的数据
 */
const onRemove = ({id}) => {
    props.elem.children = props.elem.children.filter((cell) => cell.id !== id)
}
</script>

<template>
    <td :style="columnStyle" @click.stop="emits('active', elem)">
        <DesignerElementBox hide-remove :is-active="activeElementId === elem.id" />
        <component is="DText1" v-for="cell in elem.children" :key="cell.id" :elem="cell" @active="el => emits('active', el)" @remove="onRemove"></component>
    </td>
</template>

<style lang="scss" scoped>
td {
    position: relative;
    border: 1px solid #ddd;
}
</style>